import { useMemo } from 'react';
import { Icon } from 'gantd';
import type { AnchorListItem } from './index';

import styles from './index.less';

export type TitleRenderProps = AnchorListItem;

/**
 * 锚点的Link标题渲染组件
 */
export default (props: TitleRenderProps) => {
  const { title, icon, count } = props;

  const showIcon = useMemo(() => {
    let res = null;
    if (typeof icon === 'string') {
      res = <Icon type={icon} />;
    } else if (typeof icon === 'object') {
      res = icon;
    }
    return res;
  }, [icon]);

  const showCount = useMemo(() => {
    let res = null;
    const type = typeof count;
    switch (type) {
      case 'string':
      case 'number':
        res = <span className={styles.count}>{count}</span>;
        break;
      case 'object':
        res = count;
        break;
      default:
        res = null;
        break;
    }

    return res;
  }, [count]);

  return typeof title === 'object' ? (
    title
  ) : (
    <span className={styles['render-title-wrapper']}>
      {showIcon}&nbsp;{title}&nbsp;{showCount}
    </span>
  );
};
